<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水#数据</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		
		<link rel="stylesheet" href="../common/css/mui.min.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<script src="../common/js/jquery.js"></script>
		<script src="../common/js/layer/layer.js"></script>
		<script src="../common/js/jquery.method.js"></script>
		<script src="../js/common.js"></script>
		<style type="text/css">
			.period-time{
	display: inline-block;
	width: 73%;
}
.period-num{
	display: inline-block;
	width: 24%;
	text-align: left;
}
.period-list ul li{
	padding-left:30px;
	padding-right:20px;
}
		</style>
	</head>
	<body class="fabu" style="background: #fff;">
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">水文地质剖面图</h1>
		</header>-->
		<div class="middle-content" style="margin-top:0;">
			<!-- 内容start -->
			<div class="header">
				<div class="header-left">
					<a class="sb-back2" href="#" onclick="backTo()" title="返回"></a>
				</div>
				<div class="header-middle">水#数据</div>
			</div>
			<div style="height:50px;width: 100%;"></div>			
		</div>
		<div class="period-list">
			<ul class="mui-table-view data-sj-ul">
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">1#</span>
    					<span class="period-num">39人</span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">2#</span>
    					<span class="period-num">24人</span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">3#</span>
    					<span class="period-num">12人</span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">23:00-23:59</span>
    					<span class="period-num">6人</span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">4#</span>
    					<span class="period-num">2人</span>
    				</li>
    			</ul>
    		</div>
	</body>
	 <script type="text/javascript">
	 $(function(){
	 	deviceInfo();
	 });
  function deviceInfo(){
  	var id=localStorage.getItem("id");
        $.ajax({
            type: "post",
            url: "http://"+remote_ip+":"+remote_port+"/"+remote_name+"/app/screen/show/deviceInfo?id="+id, //路径 
            async: false,
            dataType: "json",
            success: function (data) {
                if(data){
                    var strHtml="";
                    data.forEach(function(val,key){
                    	strHtml+=`<li class="mui-table-view-cell line-ul-li">
    					<span class="period-time">${val["deviceCode"]}</span>
    					<span class="period-num"><em>${val["reportValue"]}</em>m</span>
    				</li>`;
                    
                    });
                    $(".data-sj-ul").html(strHtml);
                }
            },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
			$.msg("获取数据失败!");
		}
            
        });
    }
        </script>
</html>
